<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>连接WIFI</title>
    <style>
        body {
            background: #f7f7f7;
            color: #111010;
        }
        #app {
            width: 260px;
            padding: 20px 10px;
            background: #d1d1d1;
            position: absolute;
            transform: translate(-50%, -50%);
            left: 50%;
            top: 50%;
            border-radius: 10px;
        }
        .form {
            display: flex;
            flex-flow: column;
            gap: 10px;
        }
        .form .input_item, .form .operate_item {
            display: flex;
            gap: 10px;
            justify-content: center;
            align-items: center;
        }
        .form .input_item .title {
            width: 68px;
        }

        input[type="text"] {
            border: none;
            padding: 5px;
        }
        input:focus-visible {
            outline: none;
        }


    </style>
</head>
<body>
    <div id="app">
        <div class="form">
            <div class="input_item">
                <div class="title">WIFI名称</div>
                <div class="content">
                    <input type="text" name="wifi_name" id="wifi_name">
                </div>
            </div>
            <div class="input_item">
                <div class="title">WIFI密码</div>
                <div class="content">
                    <input type="text" name="wifi_pwd" id="wifi_pwd">
                </div>
            </div>
            <div class="operate_item">
                <div class="btn">
                    <input type="button" value="提交">
                </div>
                <!-- <div class="btn">
                    <input type="button" value="自动获取">
                </div> -->
            </div>
        </div>
    </div>
</body>
<script>
    const wifiNameEl = document.getElementById('wifi_name');
    wifiNameEl.focus();
</script>
</html>